<template>
    <el-row>
        <el-col :span="24">
            <div class="grid-content ep-bg-purple-dark" />
            <el-card>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <el-row>
                            <el-col :span="7">
                                <el-button type="success" style="width: 100%; margin-right: 10px;" @click="showAddDialog">添加</el-button>
                            </el-col>
                            <el-col :span="7">
                                <el-button type="success" style="width: 100%; margin-right: 10px;" @click="exportExcel">下载</el-button>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item style="padding-bottom: 10px; width: 100%">
                                    <el-upload class="upload-demo" action="http://localhost:8080/admin/owner/importExcel" name="file"
                                        :before-upload="beforeExcelUpload" :on-exceed="handleExcelSuccess" :limit="1"
                                        accept=".xls,.xlsx" :headers="headers">
                                        <el-button type="primary" style="width: 100%">导入数据</el-button>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item style="float: right;">
                        <el-input v-model="searchCondition.oname" placeholder="请输入姓名模糊查询" @input="onSearch" />
                    </el-form-item>
                    <el-form-item style="float: right;">
                        <el-input v-model="searchCondition.ophone" placeholder="请输入电话模糊查询" @input="onSearch" />
                    </el-form-item>

                </el-form>
                <el-table :data="pageInfo.list" border style="width: 100%">
                    <el-table-column prop="oid" label="ID" width="50px" />
                    <el-table-column prop="oname" label="业主姓名" />
                    <el-table-column prop="ogender" label="业主性别" />
                    <el-table-column prop="ophone" label="业主电话" />
                    <el-table-column prop="address" label="业主住址" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button size="small" type="primary" @click="selectByoid(scope.row.oid)">修改</el-button>
                            <el-popconfirm title="你确定要删除嘛" confirm-button-text="确认" cancel-button-text="取消"
                                @confirm="deleteByOid(scope.row.oid)">
                                <template #reference>
                                    <el-button size="small" type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row class="row-bg" justify="center" style="margin-top: 20px;">
                    <el-pagination background layout="prev, pager, next" :total="pageInfo.total"
                        :page-size="pageInfo.pageSize" @change="selectByPage" />
                </el-row>
            </el-card>
        </el-col>
    </el-row>
    <!--添加业主的对话框开始-->
    <el-dialog v-model="addDialogshow" title=" 添加业主" width="500">
        <el-form>
            <el-form-item label="业主姓名" label-width="20%">
                <el-input v-model="ownerAdd.oname" vautocomplete="off" />
            </el-form-item>
            <el-form-item label="性别" label-width="20%">
                <el-radio-group v-model="ownerAdd.ogender">
                    <el-radio value="男" size="large">男</el-radio>
                    <el-radio value="女" size="large">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="业主电话" label-width="20%">
                <el-input v-model="ownerAdd.ophone" vautocomplete="off" />
            </el-form-item>
            <el-form-item label="业主住址" label-width="20%">
                <el-input v-model="ownerAdd.address" vautocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialogshow = false">取消</el-button>
                <el-button type="primary" @click="insert">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!--添加业主的对话框结束-->
    <!--修改业主的对话框开始-->
    <el-dialog v-model="updateDialogShow" title=" 修改业主" width="500">
        <el-form>
            <el-form-item label="业主姓名" label-width="20%">
                <el-input v-model="ownerUpdate.oname" vautocomplete="off" />
            </el-form-item>
            <el-form-item label="性别" label-width="20%">
                <el-radio-group v-model="ownerUpdate.ogender">
                    <el-radio value="男" size="large">男</el-radio>
                    <el-radio value="女" size="large">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="业主电话" label-width="20%">
                <el-input v-model="ownerUpdate.ophone" vautocomplete="off" />
            </el-form-item>
            <el-form-item label="业主住址" label-width="20%">
                <el-input v-model="ownerUpdate.address" vautocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateDialogShow = false">取消</el-button>
                <el-button type="primary" @click="update">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!--修改业主的对话框结束-->
</template>

<script setup>
import { reactive, ref,computed } from 'vue';
import { ElMessage } from 'element-plus';
import { ElLoading } from 'element-plus';
import ownerApi from '@/api/ownerApi';
import { useTokenStore } from '@/stores/token';
const tokenStore = useTokenStore();
//上传文件headers
const headers = computed(() => {
    let token = tokenStore.tokenStr;
  return {
    token
  }
});
// 添加对话框是否显示状态
const addDialogshow = ref(false);
// 修改对话框是否显示状态
const updateDialogShow = ref(false);
// 分页信息
const pageInfo = ref({
    total: 0,
    pageSize: 0
});
// 搜索条件
const searchCondition = reactive({
    oname: '',
    ophone: ''
});
// 定义导出方法
function exportExcel() {
    ownerApi.exportExcel()
        .then(resp => {
            let blob = new Blob([resp], { type: 'application/xlsx' });
            let url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = "业主信息表.xlsx";
            link.click();
            URL.revokeObjectURL(url);
            ElMessage.success('导出成功');
    })
    
}
//添加上传excel文件前
function beforeExcelUpload(rawFile) {
  const allowedTypes = ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'];

  if (!allowedTypes.includes(rawFile.type)) {
    ElMessage.error('上传文件只能是 .xlsx 或 .xls 格式!');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('上传文件大小不能超过 2MB!');
    return false;
  }
  ElMessage.success('上传excel文件成功');
  location.reload();
  return true;

}
//添加excel文件后
function handleExcelSuccess(resp) {
  if (resp.code == 10000) {
  }
}


// 显示添加
function showAddDialog() {
    addDialogshow.value = true;
}

// 分页查询
function selectByPage(pageNum) {
    ownerApi.selectByPage(pageNum, searchCondition)
    .then(resp => {
            pageInfo.value = resp.data;

        })
}

// 定义输入框改变时执行查询的方法
function onSearch() {
    selectByPage(1);
}

// 被添加部门的信息
const ownerAdd = ref({
    oname: '',
    ogender: '',
    ophone: '',
    address: ''
});
// 被修改部门的信息
const ownerUpdate = ref({
    oid: '',
    oname: '',
    ogender: '',
    ophone: '',
    address: ''
});

// 定义方法实现部门修改
function update() {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中~~~',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    ownerApi.update(ownerUpdate.value)
    .then(resp => {
            loading.close();
            if (resp.code == 10000) {
                // 弹出消息
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                updateDialogShow.value = false;
                selectByPage(pageInfo.value.pageNum);
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        });
}

// 定义方法根据id查询部门的信息
function selectByoid(oid) {
    ownerApi.selectById(oid)
    .then(resp => {
            ownerUpdate.value = resp.data;
            // 显示修改对话框
            updateDialogShow.value = true;
        })
}

// 定义方法完成部门添加
function insert() {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中~~~',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    ownerApi.insert(ownerAdd.value)
    .then(resp => {
            loading.close();
            if (resp.code == 10000) {
                // 弹出消息
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                // 隐藏对话框
                addDialogshow.value = false;
                // 清空对话框的数据
                ownerAdd.value = {
                    oname: '',
                    ogender: '',
                    ophone: '',
                    address: ''
                }
                selectByPage(pageInfo.value.pageNum);
            } else {
                // 弹出消息
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        });
}

// 定义方法根据部门id删除业主
function deleteByOid(oid) {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中~~~',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    ownerApi.delete(oid)
    .then(resp => {
            loading.close();
            if (resp.code == 10000) {
                // 弹出消息
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                })
                // 刷新表格
                selectByPage(pageInfo.value.pageNum);
            } else {
                // 弹出消息
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        });
}

selectByPage(1);
</script>

<style scoped>

</style>